<template>
    <div class="info">
        <h1 style="display:flex;align-items:center;">
            {{ shopInfo.name }}
        </h1>
        <p style="display:flex;align-items:center;">
            <icon name="cps-icon-home-sheep" :url="newSvgUrl" style="margin-right:2px;" />
            {{ shopInfo.address }}
        </p>
        <div class="map">
            <div id="container" ref="container"></div>
        </div>
    </div>
</template>

<script setup>
import { Icon } from 'tdesign-icons-vue-next';
import { onMounted, ref, watch } from "@vue/runtime-core"

const newSvgUrl = 'https://tdesign.gtimg.com/icon/default-demo/index.js';
const props = defineProps({
    shopInfo: {
        typeof: Object,
        default: () => ({})
    }
})

const container = ref();
onMounted(() => {
    watch(props, () => {
        var map = new AMap.Map('container', {
            viewMode: '3D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
            zoom: 11, //初始化地图层级
            center: [props?.shopInfo?.longitude, props?.shopInfo?.latitude] //初始化地图中心点
        });
        var marker = new AMap.Marker({
            position: [props?.shopInfo?.longitude, props?.shopInfo?.latitude]//位置
        })
        map.add(marker);//添加到地图

    })
    var marker = new AMap.Marker({
        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        position: [props?.shopInfo?.longitude, props?.shopInfo?.latitude],
        anchor: 'bottom-center'
    });
})
</script>
 
<style lang="less" scoped>
.info {
    border-radius: 10px;
    box-sizing: border-box;
    padding: 20px;
    width: 42vw;
    background-color: rgba(178, 32, 32, 1);
    color: gray;
    margin-right: 2vw;
    transition: all 0.3s;
    position: relative;
    box-sizing: border-box;
    flex: 1;

    h1 {
        font-size: 20px;
        color: rgb(79, 84, 91);
        margin-bottom: 5px;
        font-weight: 600;
    }

    p {
        margin-bottom: 5px;
    }

    .map {
        position: relative;
        width: 100%;
        height: 200px;

        #container {
            position: absolute;
            width: 100%;
            height: 200px;
        }
    }
}

.info:hover {
    transform: scale(1.03);
    box-shadow: 1px 1px 20px 5px rgba(228, 163, 126, 0.5);
}
</style>